<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<template>
  <view class="confirm-page">
    <scroll-view class="confirm-scroll" scroll-y>
      <view class="main">
        <!-- 订单列表 -->
        <view class="order-content-list">
          <navigator
            :url="`/pages/goods/goods?id=${2}`"
            hover-class="none"
            class="order-content-item"
            v-for="(item, index) in 2"
            :key="index"
          >
            <image
              class="left"
              src="https://img14.360buyimg.com/n0/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg"
              mode="scaleToFill"
            />
            <view class="center">
              <text class="name">紫薯包</text>
              <text class="spec">[奥利奥饼干夹心][6寸]</text>
            </view>
            <view class="right">
              <text class="price">¥5.80</text>
              <text class="num">x1</text>
            </view>
          </navigator>
        </view>

        <view class="address">
          <view class="icon"><text class="iconfont icon-address"></text></view>
          <view class="meta">
            <text class="title">江苏省淮安市涟水县万通商场南大门西侧百分百蛋糕面包坊</text>
            <text class="con">张女士 138****5678</text>
          </view>
          <view class="icon edit"><text class="iconfont icon-bianji1"></text></view>
        </view>
        <view class="delivery-time">
          <view class="icon"><text class="iconfont icon-RectangleCopy13"></text></view>
          <text class="text">今天 18:00-19:00</text>
        </view>
        <view class="payment-methods-fn">
          <view class="title">选择支付方式</view>
          <view class="method">
            <text class="iconfont icon-weixin"></text>
            <text>微信支付</text>
            <text class="iconfont icon-gouxuan-xuanzhong-yuankuang"></text>
          </view>
        </view>

        <view class="order-summary">
          <view class="summary-item">
            <text class="label">商品总价</text>
            <text class="value">¥170.80</text>
          </view>
          <view class="summary-item">
            <text class="label">配送费</text>
            <text class="value">¥3.00</text>
          </view>
          <view class="summary-item">
            <text class="label">优惠</text>
            <text class="value">-¥3.00</text>
          </view>
          <view class="summary-item">
            <text class="label">实付金额</text>
            <text class="value">¥167.80</text>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 支付按钮 -->
    <button class="confirm-button" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
      确认支付
    </button>
  </view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';
page {
  height: 100%;
  overflow: hidden;
  background-color: $background-color;
}
.confirm-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  .onfirm-scroll {
    flex: 1;
  }
  .main {
    flex: 1;
    padding: 20rpx;

    .order-content-list {
      .order-content-item {
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        border-radius: $border-medium-radius;
        margin-bottom: 30rpx;

        .left {
          width: 160rpx;
          height: 160rpx;
          border-radius: $border-small-radius;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .center {
          flex: 1;
          margin-left: 32rpx;
          display: flex;
          flex-direction: column;

          .name {
            font-size: $font-medium-size;
            color: $good-font-title-color;
            font-weight: $font-medium-weight;
            margin-bottom: 10rpx;
          }

          .spec {
            font-size: $font-size;
            color: $good-font-con-color;
            font-weight: $font-regular-weight;
          }
        }

        .right {
          text-align: right;
          display: flex;
          flex-direction: column;

          .price {
            font-size: $font-medium-size;
            color: $good-font-title-color;
            font-weight: $font-medium-weight;
            margin-bottom: 10rpx;
          }

          .num {
            font-size: $font-size;
            color: $good-font-con-color;
            font-weight: $font-regular-weight;
          }
        }
      }
    }

    .address {
      border-radius: $border-medium-radius $border-medium-radius 0 0;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 32rpx;

      .icon-jinru {
        color: #9ca3af;
      }

      .icon {
        margin-bottom: auto;
        padding-right: 30rpx;
        .iconfont {
          font-size: 40rpx;
          color: $color;
        }
        &.edit {
          padding-right: 0;
          margin-left: 10rpx;
          .iconfont {
            font-size: 30rpx;
            margin-bottom: auto;
            color: $icon-color;
          }
        }
      }

      .meta {
        flex: 1;
        display: flex;
        flex-direction: column;

        .title {
          font-size: $font-medium-size;
          font-weight: $font-medium-weight;
          color: $good-font-title-color;
          margin-bottom: 10rpx;
        }

        .con {
          font-size: $font-size;
          color: $font-color;
        }
      }
    }
    .delivery-time {
      margin-bottom: 30rpx;
      border-radius: 0 0 $border-medium-radius $border-medium-radius;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 32rpx;
      position: relative;
      &::before {
        position: absolute;
        top: 0;
        left: 30rpx;
        right: 30rpx;
        content: '';
        border: 1px solid $border-color;
      }
      .icon {
        margin-bottom: auto;
        padding-right: 30rpx;
        .iconfont {
          font-size: 40rpx;
          color: $color;
        }
      }

      .text {
        font-size: $font-medium-size;
        font-weight: 500;
        color: #111827;
      }
    }

    .payment-methods-fn {
      border-radius: $border-medium-radius;
      background-color: #fff;
      padding: 32rpx;
      margin-bottom: 32rpx;
      .title {
        font-size: $font-medium-size;
        font-weight: $font-medium-weight;
        color: $good-font-title-color;
        margin-bottom: 32rpx;
      }
      .method {
        display: flex;
        align-items: center;
        padding: 20rpx;
        border: 1px solid $border-color;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        background-color: #fff;
        color: $color;

        text:nth-child(1) {
          font-size: 40rpx;
          font-weight: $font-medium-weight;
          margin-right: 20rpx;
        }

        text:nth-child(2) {
          flex: 1;
          font-size: $font-medium-size;
          color: $good-font-title-color;
          font-weight: $font-weight;
        }
      }
    }

    .order-summary {
      display: flex;
      flex-direction: column;
      padding: 32rpx;
      background-color: #fff;
      border-radius: $border-medium-radius;
      margin-bottom: 32rpx;

      .summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32rpx;

        .label {
          font-size: $font-medium-size;
          color: $font-color;
          font-weight: $font-weight;
        }

        .value {
          font-size: $font-medium-size;
          color: $font-color;
          font-weight: $font-weight;
        }

        &:nth-child(3) {
          .label,
          .value {
            color: $color;
          }
        }
        &:nth-child(4) {
          padding-top: 32rpx;
          position: relative;
          &::before {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            content: '';
            border: 1px solid $border-color;
          }
          .value {
            color: $price-total-font-color;
          }
        }
      }
    }
  }
  .confirm-button {
    background-color: $color;
    color: white;
    border: none;
    height: 104rpx;
    line-height: 104rpx;
    border-radius: 52rpx;
    width: auto;
    font-size: $font-medium-size;
    margin: 0 32rpx;
  }
}
</style>
